import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Rectangle {
    color: "transparent"
    
    RowLayout {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 12
        
        // 左侧：算法分类与动态配置
        Rectangle {
            Layout.preferredWidth: 330
            Layout.fillHeight: true
            color: "#f8f9fa"
            border.color: "#dee2e6"
            border.width: 1
            radius: 8
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 15
                spacing: 15
                
                // 标题
                Label {
                    text: "算法分类与动态配置"
                    font.pixelSize: 16
                    font.bold: true
                    color: "#2c3e50"
                    Layout.alignment: Qt.AlignLeft
                }
                
                // 算法类型列表
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 12
                    
                    // 行走算法
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Label {
                            text: "行走算法"
                            font.pixelSize: 14
                            color: "#2c3e50"
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignVCenter
                        }
                        
                        Item {
                            Layout.fillWidth: true
                        }
                        
                        ComboBox {
                            id: walkingAlgorithmCombo
                            Layout.preferredWidth: 120
                            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                            model: ["平地", "山地", "丘陵"]
                            currentIndex: 0
                            font.pixelSize: 14
                            
                            background: Rectangle {
                                color: "white"
                                border.color: "#60A3BC"
                                border.width: 2
                                radius: 4
                            }
                            
                            contentItem: Text {
                                text: walkingAlgorithmCombo.displayText
                                font: walkingAlgorithmCombo.font
                                color: "#2c3e50"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                elide: Text.ElideRight
                            }
                            
                            onActivated: {
                                console.log("行走算法选择:", currentText)
                            }
                        }
                    }
                    
                    // 感知算法
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Label {
                            text: "感知算法"
                            font.pixelSize: 14
                            color: "#2c3e50"
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignVCenter
                        }
                        
                        Item {
                            Layout.fillWidth: true
                        }
                        
                        ComboBox {
                            id: perceptionAlgorithmCombo
                            Layout.preferredWidth: 120
                            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                            model: ["白天", "夜晚", "全天候"]
                            currentIndex: 0
                            font.pixelSize: 14
                            
                            background: Rectangle {
                                color: "white"
                                border.color: "#60A3BC"
                                border.width: 2
                                radius: 4
                            }
                            
                            contentItem: Text {
                                text: perceptionAlgorithmCombo.displayText
                                font: perceptionAlgorithmCombo.font
                                color: "#2c3e50"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                elide: Text.ElideRight
                            }
                            
                            onActivated: {
                                console.log("感知算法选择:", currentText)
                            }
                        }
                    }
                    
                    // 控制算法
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Label {
                            text: "控制算法"
                            font.pixelSize: 14
                            color: "#2c3e50"
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignVCenter
                        }
                        
                        Item {
                            Layout.fillWidth: true
                        }
                        
                        ComboBox {
                            id: controlAlgorithmCombo
                            Layout.preferredWidth: 120
                            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                            model: ["高速", "中速", "低速"]
                            currentIndex: 0
                            font.pixelSize: 14
                            
                            background: Rectangle {
                                color: "white"
                                border.color: "#60A3BC"
                                border.width: 2
                                radius: 4
                            }
                            
                            contentItem: Text {
                                text: controlAlgorithmCombo.displayText
                                font: controlAlgorithmCombo.font
                                color: "#2c3e50"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                elide: Text.ElideRight
                            }
                            
                            onActivated: {
                                console.log("控制算法选择:", currentText)
                            }
                        }
                    }
                    
                    // 诊断算法
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10
                        
                        Label {
                            text: "诊断算法"
                            font.pixelSize: 14
                            color: "#2c3e50"
                            Layout.preferredWidth: 80
                            Layout.alignment: Qt.AlignVCenter
                        }
                        
                        Item {
                            Layout.fillWidth: true
                        }
                        
                        ComboBox {
                            id: diagnosticAlgorithmCombo
                            Layout.preferredWidth: 120
                            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                            model: ["实时", "定时", "事件触发"]
                            currentIndex: 0
                            font.pixelSize: 14
                            
                            background: Rectangle {
                                color: "white"
                                border.color: "#60A3BC"
                                border.width: 2
                                radius: 4
                            }
                            
                            contentItem: Text {
                                text: diagnosticAlgorithmCombo.displayText
                                font: diagnosticAlgorithmCombo.font
                                color: "#2c3e50"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                elide: Text.ElideRight
                            }
                            
                            onActivated: {
                                console.log("诊断算法选择:", currentText)
                            }
                        }
                    }
                }
                
                // 分隔线
                Rectangle {
                    Layout.fillWidth: true
                    height: 1
                    color: "#dee2e6"
                    Layout.topMargin: 10
                    Layout.bottomMargin: 10
                }
                
                // 代码库管理
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 10
                    
                    Label {
                        text: "代码库管理"
                        font.pixelSize: 14
                        font.bold: true
                        color: "#2c3e50"
                    }
                    
                    Button {
                        Layout.preferredWidth: 120
                        Layout.preferredHeight: 35
                        text: "上传算法包"
                        font.pixelSize: 14
                        background: Rectangle {
                            color: "#4a90e2"
                            radius: 6
                        }
                        contentItem: Text {
                            text: parent.text
                            font: parent.font
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }
                        
                        onClicked: {
                            console.log("上传算法包")
                        }
                    }
                    
                    Label {
                        text: "支持格式：.zip / .tar.gz，需包含 manifest.json"
                        font.pixelSize: 12
                        color: "#95a5a6"
                        Layout.fillWidth: true
                        wrapMode: Text.WordWrap
                    }
                }
                
                Item {
                    Layout.fillHeight: true
                }
            }
        }
        
        // 右侧：算法调度控制台
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#f8f9fa"
            border.color: "#dee2e6"
            border.width: 1
            radius: 8
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 15
                spacing: 15
                
                // 标题
                Label {
                    text: "算法调度控制台"
                    font.pixelSize: 16
                    font.bold: true
                    color: "#2c3e50"
                    Layout.alignment: Qt.AlignLeft
                }
                
                // 表格
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "white"
                    border.color: "#dee2e6"
                    border.width: 1
                    
                    ColumnLayout {
                        anchors.fill: parent
                        anchors.margins: 1
                        spacing: 0
                        
                        // 表头
                        Rectangle {
                            Layout.fillWidth: true
                            height: 40
                            color: "#e9ecef"
                            
                            RowLayout {
                                anchors.fill: parent
                                anchors.leftMargin: 10
                                anchors.rightMargin: 10
                                spacing: 5
                                
                                Label {
                                    text: "算法编码"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                    Layout.preferredWidth: Math.max(90, parent.width * 0.18)
                                    Layout.alignment: Qt.AlignVCenter
                                }
                                
                                Label {
                                    text: "名称"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                    Layout.preferredWidth: Math.max(120, parent.width * 0.28)
                                    Layout.alignment: Qt.AlignVCenter
                                }
                                
                                Label {
                                    text: "状态"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                    Layout.preferredWidth: Math.max(70, parent.width * 0.18)
                                    Layout.alignment: Qt.AlignVCenter
                                }
                                
                                Label {
                                    text: "下位机"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                    Layout.preferredWidth: Math.max(70, parent.width * 0.18)
                                    Layout.alignment: Qt.AlignVCenter
                                }
                                
                                Label {
                                    text: "操作"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                    Layout.fillWidth: true
                                    Layout.alignment: Qt.AlignVCenter
                                }
                            }
                        }
                        
                        // 数据行
                        ListView {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            model: ListModel {
                                ListElement {
                                    code: "ALG-W-001"
                                    name: "平地路径规划"
                                    status: "启用"
                                    statusColor: "#28a745"
                                    device: "已同步"
                                    deviceColor: "#28a745"
                                    operation: "下发"
                                }
                                ListElement {
                                    code: "ALG-P-001"
                                    name: "白天图像识别"
                                    status: "启用"
                                    statusColor: "#28a745"
                                    device: "已同步"
                                    deviceColor: "#28a745"
                                    operation: "下发"
                                }
                                ListElement {
                                    code: "ALG-D-001"
                                    name: "实时故障检测"
                                    status: "未启用"
                                    statusColor: "#6c757d"
                                    device: "未同步"
                                    deviceColor: "#6c757d"
                                    operation: "下发"
                                }
                            }
                            
                            delegate: Rectangle {
                                width: ListView.view.width
                                height: 45
                                color: index % 2 === 0 ? "white" : "#f8f9fa"
                                border.color: "#dee2e6"
                                border.width: 0.5
                                
                                RowLayout {
                                    anchors.fill: parent
                                    anchors.leftMargin: 10
                                    anchors.rightMargin: 10
                                    spacing: 5
                                    
                                    Label {
                                        text: model.code
                                        font.pixelSize: 13
                                        color: "#2c3e50"
                                        Layout.preferredWidth: Math.max(90, parent.width * 0.18)
                                        Layout.alignment: Qt.AlignVCenter
                                        elide: Text.ElideRight
                                    }
                                    
                                    Label {
                                        text: model.name
                                        font.pixelSize: 13
                                        color: "#2c3e50"
                                        Layout.preferredWidth: Math.max(120, parent.width * 0.28)
                                        Layout.alignment: Qt.AlignVCenter
                                        elide: Text.ElideRight
                                    }
                                    
                                    Rectangle {
                                        Layout.preferredWidth: Math.max(50, parent.width * 0.16)
                                        Layout.preferredHeight: 22
                                        color: model.statusColor
                                        radius: 11
                                        Layout.alignment: Qt.AlignVCenter
                                        
                                        Label {
                                            anchors.centerIn: parent
                                            text: model.status
                                            font.pixelSize: 10
                                            color: "white"
                                            elide: Text.ElideRight
                                        }
                                    }
                                    
                                    Rectangle {
                                        Layout.preferredWidth: Math.max(60, parent.width * 0.16)
                                        Layout.preferredHeight: 22
                                        color: model.deviceColor
                                        radius: 11
                                        Layout.alignment: Qt.AlignVCenter
                                        
                                        Label {
                                            anchors.centerIn: parent
                                            text: model.device
                                            font.pixelSize: 10
                                            color: "white"
                                            elide: Text.ElideRight
                                        }
                                    }
                                    
                                    Button {
                                        Layout.preferredWidth: Math.max(50, parent.width * 0.12)
                                        Layout.preferredHeight: 24
                                        text: model.operation
                                        font.pixelSize: 11
                                        background: Rectangle {
                                            color: "transparent"
                                            border.color: "#6c757d"
                                            border.width: 1
                                            radius: 4
                                        }
                                        contentItem: Text {
                                            text: parent.text
                                            font: parent.font
                                            color: "#6c757d"
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignVCenter
                                            elide: Text.ElideRight
                                        }
                                        Layout.alignment: Qt.AlignVCenter
                                        
                                        onClicked: {
                                            console.log("下发算法：" + model.code)
                                        }
                                    }
                                    
                                    Item {
                                        Layout.preferredWidth: Math.max(10, parent.width * 0.1)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
